<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 64px">
            <span @click="toggleKmOption">网络支付配置</span>
            <span
                style="color: #000; font-size: 15px; margin-left: 20px"
            ></span>
            <span style="float: right">
                <el-button
                    type="primary"
                    plain
                    size="small"
                    :disabled="!isUpData"
                    @click="onSubmit"
                    >确认保存</el-button
                >
                <el-button type="danger" plain size="small" @click="toMain"
                    >返回</el-button
                >
            </span>
        </div>

        <div class="report-table-form1">
            <el-form
                :disabled="!isUpData"
                :model="netPayInfo"
                ref="netPayInfo"
                :rules="rules"
                label-width="120px"
            >
                <el-form-item
                    label="商家名称:"
                    prop="netPayChannel"
                    style="margin-bottom: 0"
                >
                    <span>
                        {{ page1KTVManageCompanyName || '' }}
                    </span>
                </el-form-item>
                <el-form-item
                    label="支付通道:"
                    prop="netPayChannel"
                    style="margin-bottom: 0"
                    @click="toggleKmOption"
                >
                    <el-select
                        v-model="netPayInfo.netPayChannel"
                        placeholder="请选择"
                        style="width: 180px"
                        size="small"
                    >
                        <el-option
                            v-for="item in optionsPay"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                            v-show="item.active"
                        ></el-option>
                    </el-select>
                    <span
                        class="report-table-form1-item word samll"
                        style="width: 190px; color: #e21c18; font-size: 12px"
                        v-show="netPayInfo.netPayChannel === 3"
                    >
                        账户信息请到娱加云商家后台配置
                    </span>
                </el-form-item>
                <el-form-item
                    prop="spareChannelType"
                    style="margin-bottom: 0"
                    v-if="netPayInfo.netPayChannel === 1"
                >
                    <span slot="label">
                        <el-checkbox
                            v-model="netPayInfo.isSpareChannel"
                            :true-label="0"
                            :false-label="1"
                            >是否备用通道:</el-checkbox
                        >
                    </span>
                    <el-select
                        style="width: 180px"
                        v-model="netPayInfo.spareChannelType"
                        :disabled="netPayInfo.isSpareChannel === 1"
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in typeList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="支付平台通道:"
                    label-width="120px"
                    prop="payDetailChannel"
                    style="margin-bottom: 0"
                    v-if="netPayInfo.netPayChannel === 1"
                >
                    <el-select
                        v-model="netPayInfo.payDetailChannel"
                        placeholder="请选择"
                        style="width: 180px"
                        size="small"
                    >
                        <el-option
                            v-for="item in typeList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="线下pos机通道:"
                    prop="payPosChannel"
                    style="margin-bottom: 0"
                    v-if="netPayInfo.netPayChannel === 1"
                >
                    <el-select
                        v-model="netPayInfo.payPosChannel"
                        placeholder="请选择"
                        style="width: 180px"
                        size="small"
                    >
                        <el-option
                            v-for="item in typeList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <div class="account-info">
                <div
                    class="info-item"
                    v-for="(item, index) in merchantAccountSimpleDetailList"
                    :key="index"
                >
                    <div class="label oe" title="渠道商户号">渠道商户号：</div>
                    <div class="value oe" :title="item.mchId">
                        {{ item.mchId }}
                    </div>
                    <div class="label oe" title="结算银行卡号">
                        结算银行卡号：
                    </div>
                    <div class="value oe" :title="item.acctId">
                        {{ item.acctId }}
                    </div>
                    <div class="label oe" title="结算户名">结算户名：</div>
                    <div class="value oe" :title="item.acctName">
                        {{ item.acctName }}
                    </div>
                    <div class="label oe" title="子商户号：">子商户号：</div>
                    <div class="value oe" :title="item.weChatSubMId">
                        <span> {{ item.weChatSubMId }}</span>
                    </div>
                </div>
            </div>
            <div class='red'>
                多账户至少应有一个账户设为无封顶配置，否者当所有账户都达到封顶金额时所有的订单将默认进入第一个账户
            </div>
                <el-row v-if="netPayInfo.netPayChannel === 2" type="flex">
                    <el-form-item label="K米商家号:" prop="kmCode">
                        <el-input
                            v-model="netPayInfo.kmCode"
                            style="width: 180px"
                            placeholder="必填"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="K米商家密码（明文）:"
                        label-width="180px"
                        prop="kmPwd"
                    >
                        <el-input
                            v-model="netPayInfo.kmPwd"
                            style="width: 180px"
                            placeholder="必填"
                            size="small"
                        ></el-input>
                    </el-form-item>
                </el-row>
            </el-form>
            <!-- split -->
            <div
                class="report-table-form1-line"
                v-show="netPayInfo.netPayChannel === 1"
            >
                <el-tabs v-model="accountChannel">
                    <el-tab-pane
                        v-for="(item, index) in typeList"
                        :key="index"
                        :label="item.tabName"
                        :name="item.name"
                    >
                        <setForm
                            :ref="item.name"
                            :sourceList="sourceList"
                            :netPayInfo="netPayInfo"
                            :accountChannel="getKey()"
                            :copyList.sync="copyList"
                        ></setForm>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
// import fuyou from './components/fuyou'
import setForm from './components/setForm'
export default {
    components: {
        // fuyou,
        setForm
    },
    data: function () {
        return {
            merchantAccountSimpleDetailList: [],
            copyList: [],
            netPayInfo: {
                accountList: [
                    {merchantNumber: '', upRatio: 100, downRatio: 100, dayReceivePaymentLimit: null}
                ],
                isSpareChannel: 1,
                payPosChannel: 0,
                payDetailChannel: 0,
                spareChannelType: 0,
                netPayChannel: '',
                kmCode: '',
                kmPwd: ''
            },
            rules: {
                kmCode: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ],
                kmPwd: [
                    { required: true, message: '不能为空', trigger: 'change' }
                ]
            },
            accountChannel: 'tonglian',
            sourceList: [
                { key: 0, value: '全部' },
                { key: 1, value: '线上' },
                { key: 2, value: '线下' }
            ],
            typeList: [
                { name: 'tonglian', tabName: '通联配置', value: '通联', key: 0 },
                { name: 'fuyou', tabName: '富友配置', value: '富友', key: 2 }
            ],
            optionsPay: [
                {
                    value: '娱加',
                    key: 1,
                    active: true
                }, {
                    value: 'K米',
                    key: 2,
                    active: true
                }, {
                    value: '原生微信/支付宝',
                    key: 3,
                    active: true
                }
            ],
            optionsPay1: [
                {
                    value: '娱加',
                    key: 1,
                    active: true
                }
            ],
            optionsPayTimer: null,
            optionsPayCount: 0
        }
    },
    mounted () {
    },
    created () {
        // 支付通道 利云酒吧 没有 原生
        if (this.managementType === 2) {
            this.optionsPay.splice(2, 1)
            this.optionsPay[1].active = false
        }
        if (this.managementType === 4) {
            this.optionsPay = this.optionsPay1
        }
        this.getCompanyNetPayChannelSetInfo()
    },
    watch: {},
    props: {
        underLine: null
    },
    computed: {
        companyId () {
            return this.$store.state.page1KTVAgentEdit
        },
        managementType () {
            return this.$store.state.page1KTVManageManagementType
        },
        isUpData () {
            return this.$store.state.isUpData
        },
        manageRoleType () {
            return this.$store.state.manageRoleType
        },
        roleId () {
            return this.$store.state.roleId
        },
        page1KTVManageCompanyName () {
            return this.$store.state.page1KTVManageCompanyName
        }
    },
    methods: {
        getCompanyNetPayChannelSetInfo () {
            // 获取商家的网络支付设置信息
            this.$http.post(this.$store.state.IP + '/system/company/getCompanyNetPayChannelSetInfo', {
                data: {
                    companyID: this.companyId
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('获取商家的网络支付设置信息成功')
                    console.log(response.data)
                    this.netPayInfo.netPayChannel = response.data.netPayChannel || 1
                    this.netPayInfo.tlCusID = response.data.tlCusID || ''
                    this.netPayInfo.tlAPPID = response.data.tlAPPID || ''
                    this.netPayInfo.tlMD5KEY = response.data.tlMD5KEY || ''
                    this.netPayInfo.accountList = response.data.companySyNetPayAccounts || [
                        { merchantNumber: '', accountChannel: this.getKey(), upRatio: 100, downRatio: 100, dayReceivePaymentLimit: null }
                    ]
                    this.netPayInfo.payDetailChannel = response.data.syNetPayDetailChannel || 0
                    this.netPayInfo.payPosChannel = response.data.syNetPayPosChannel || 0
                    this.netPayInfo.isSpareChannel = response.data.isSpareChannel
                    this.netPayInfo.spareChannelType = response.data.spareChannelType || 0
                    this.accountChannel = response.data.accountChannel || 'tonglian'
                    this.netPayInfo.kmCode = response.data.kmCode || ''
                    this.netPayInfo.kmPwd = response.data.kmPwd || ''
                    this.merchantAccountSimpleDetailList = response.data.merchantAccountSimpleDetailList
                }
                if (response.ret !== '0') {
                    console.log('获取商家的网络支付设置信息失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        getKey () {
            let key = ''
            this.typeList.forEach(item => {
                if (item.name === this.accountChannel) {
                    key = item.key
                }
            })
            return key
        },
        setCompanySyNetPayChannel () {
            // 设置商家的网络支付（进件管理）
            this.$http.post(this.$store.state.IP + '/system/company/setCompanySyNetPayChannel', {
                data: {
                    companyID: this.companyId,
                    netPayChannel: this.netPayInfo.netPayChannel,
                    kmCode: this.netPayInfo.kmCode,
                    kmPwd: this.netPayInfo.kmPwd,
                    payDetailChannel: this.netPayInfo.payDetailChannel,
                    payPosChannel: this.netPayInfo.payPosChannel,
                    isSpareChannel: this.netPayInfo.isSpareChannel,
                    spareChannelType: this.netPayInfo.spareChannelType,
                    accountChannel: this.getKey(),
                    accountList: this.netPayInfo.accountList
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('设置商家的网络支付成功')
                    this.$message({
                        showClose: true,
                        message: '设置成功',
                        type: 'success'
                    })
                    this.getCompanyNetPayChannelSetInfo()
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        onSubmit () {
            console.log(this.netPayInfo)
            console.log(this.$refs.tonglian)
            console.log(this.$refs.fuyou)
            if (this.netPayInfo.netPayChannel === 1) {
                if (this.$refs.fuyou[0].submit('form') && this.$refs.tonglian[0].submit('form')) {
                    console.log(this.copyList)
                    this.setCompanySyNetPayChannel()
                }
            }
            if (this.netPayInfo.netPayChannel === 2) {
                // K米
                if (this.netPayInfo.kmCode === '') {
                    this.$message({
                        showClose: true,
                        message: 'K米商家号不能为空',
                        type: 'warning'
                    })
                    return
                }
                if (this.netPayInfo.kmPwd === '') {
                    this.$message({
                        showClose: true,
                        message: 'K米商家密码不能为空',
                        type: 'warning'
                    })
                    return
                }
                this.setCompanySyNetPayChannel()
            }
            if (this.netPayInfo.netPayChannel === 3) {
                this.setCompanySyNetPayChannel()
            }
        },
        toMain () {
            // 返回
            this.netPayInfo = {
                accountList: [],
                isSpareChannel: 1,
                payPosChannel: 0,
                payDetailChannel: 0,
                spareChannelType: 0,
                netPayChannel: '',
                kmCode: '',
                kmPwd: ''
            }
            this.$store.dispatch('setKM', 0)
            this.$store.dispatch('setKA', 0)
        },

        toggleKmOption () {
            console.log(999)
            // 在 3s 内 连续点击 5 次，出现 K米 选项，超出 3s 重新 计算
            if (this.roleId === 1 && this.manageRoleType === 0) {
                if (!this.optionsPayTimer) {
                    this.optionsPayTimer = setTimeout(() => {
                        this.optionsPayCount = 0
                        clearTimeout(this.optionsPayTimer)
                        this.optionsPayTimer = null
                    }, 3 * 1000)
                }
                this.optionsPayCount++
                if (this.optionsPayCount === 5) {
                    console.log('has click for 5 times')
                    this.optionsPay.map(item => {
                        if (item.key === 2) {
                            item.active = true
                        }
                    })
                }
            }
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.red
    color:red
    font-size:15px
.account-info
    padding: 10px 15px
    zoom: 1
    margin-bottom 15px

.info-item
    margin-top: 5px
    font-size: 14px
    line-height: 24px
    display: flex
    align-items: center
    width: 100%

    .label
        color: #606266
        width: 100px
        min-width: 100px

    .value
        color: #606266
        width: 180px
        min-width: 180px

.oe
    overflow: hidden
    white-space: nowrap
    text-overflow: ellipsis

.flex
    display: flex
    align-items: center

.order-report
    width: 100%
    background: #f1f0f5

    .report-table-top-title
        width: 100%
        height: 64px
        line-height: 64px
        color: #000
        font-size: 18px

    .report-table-form1
        width: 100%
        min-height: 40px
        padding: 16px 0 0 22px
        box-sizing: border-box
        background: #fff
        overflow: hidden
</style>
